<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单控件</title>
  </head>
  <body>
    <!-- 表单域 -->
    <!-- 注意: 表单控件都有缓存,所以需要通过ctrl + F5来实现彻底刷新! -->
    <!-- 注意: 表单控件要真正使用,必须提供name属性以及对应的value属性(输入型控件除外) -->
    <form action="user/register" method="get">
      <!-- 表单控件,用来收集用户信息的组件,它们有很多种不同的类型 -->
      <!-- 1.文本框 -->
      <input type="text" name="username" />

      <!-- 2.密码框 -->
      <input type="password" name="password" />

      <!-- 
        3.单选按钮 
        注意: 一组radio,只要name属性的值相同,即可以实现单选效果
      -->
      <input type="radio" name="gender" value="0" />男 <input type="radio" name="gender" value="1" />女

      <!-- 4.多选按钮 -->
      <input type="checkbox" name="hobby" value="0" />游泳 <input type="checkbox" name="hobby" value="1" />跑步
      <input type="checkbox" name="hobby" value="2" />爬山 <input type="checkbox" name="hobby" value="3" />滑雪

      <!-- 5.下拉菜单 -->
      <select name="province">
        <option>--请您选择省份--</option>
        <option value="0">江苏省</option>
        <option value="1">河南省</option>
        <option value="2">广东省</option>
      </select>

      <!-- 6.文本域, 可以换行并且调整大小的文本框,cols表示初始列数,rows表示初始行数 -->
      <textarea cols="25" rows="5" name="info"></textarea>

      <!-- 7.按钮 -->
      <!-- 7-1.普通按钮,没有功能,需要搭配JS编程添加功能 -->
      <input type="button" value="普通按钮" />

      <!-- 7-2.提交按钮 -->
      <input type="submit" value="提交按钮" />

      <!-- 
          7-3.重置按钮
          注意: 重置按钮必须写在表单域范围内才有效!
      -->
      <input type="reset" value="重置按钮" />

      <!-- 补充: 按钮还有另一种写法,type用来区分不同的按钮类型,默认不写是submit -->
      <button type="button">普通按钮</button>
      <button type="submit">提交按钮</button>
      <button type="reset">重置按钮</button>

      <hr />

      <!-- 补充: 其他表单控件 -->
      <!-- (掌握) 上传控件 -->
      <input type="file" />

      <!-- (掌握) 隐藏域-->
      <input type="hidden" name="hide" value="abc123" />

      <!-- 数字控件 -->
      <input type="number" />

      <!-- 邮箱控件 -->
      <input type="email" />

      <!-- 日历控件 -->
      <input type="date" />

      <!-- 范围控件 -->
      <input type="range" />

      <!-- 颜色控件 -->
      <input type="color" />
    </form>
  </body>
</html>
